<template>
<div  style="height: calc( 100% - 87px );display:flex;">
  <div style="width:50%;">
    <div style="display: flex;">
        <div class="headerBox">{{$t('LineManagementLang.Origin')}}</div>
    </div>
    <el-tree
      ref="tree_left"
      show-checkbox
      :data="treeData_left" 
      node-key="id"
      :default-checked-keys="checkedArr_left"
      :props="defaultProps"
      default-expand-all
      check-strictly
      @check="handleCheck_left"
    >
    </el-tree>
    <!-- 分页组件 -->
    <PaginationRight
      :isShow="false"
      @sendPushButton="pushButton_left"
    >
    </PaginationRight>
  </div>
  <div style="width:50%;">
    <div style="display: flex;">
        <div class="headerBox">{{$t('LineManagementLang.destination')}}</div>
    </div>
    <el-tree
      ref="tree_right"
      show-checkbox
      :data="treeData_right" 
      node-key="id"
      :default-checked-keys="checkedArr_right"
      :props="defaultProps"
      default-expand-all
      check-strictly
      @check="handleCheck_right"
    >
    </el-tree>
    <!-- 分页组件 -->
    <PaginationRight
      :isShow="false"
      @sendPushButton="pushButton_right"
    >
    </PaginationRight>
  </div>
</div>
</template>

<script>
export default {
  components: {
  },
  data(){
    return{
      defaultProps: {
        label: 'name_current',
        children: 'son'
      },
      treeData_left: [],
      treeData_right: [],
      role_id:'',
      checkedArr_left:[],//当前选中菜单id数组
      noCheckedArr_left:[],//当前非选中菜单id数组
      checkedArr_right:[],//当前选中菜单id数组
      noCheckedArr_right:[],//当前非选中菜单id数组
    }
  },
  computed: {
      tabsId() {
          return this.$store.state.tabsId;
      }
  },
  mounted(){
    eventBus.$on('sendDataAppRoleUser',data=>{
      this.role_id=data
      this.getCheckedTreeList()
    })
  },
  methods:{
    //选中菜单对进行增删
    handleCheck_left(data,obj){
      let temp=obj.checkedKeys.findIndex(item=>{return item==data.id})==-1
      if(!temp){
        this.getParentNode_left(this.$refs.tree_left.getNode(data.id))
        this.getTrueChildNode_left(this.$refs.tree_left.getNode(data.id))
      }else{
        this.getFalseChildNode_left(this.$refs.tree_left.getNode(data.id))
        this.$refs.tree_left.setCheckedKeys(this.checkedArr_left)
      }
    },
    getParentNode_left(node){
        if(!!node.parent){
          this.checkedArr_left.push(node.data.id)
          this.checkedArr_left= Array.from(new Set(this.checkedArr_left))
          this.getParentNode_left(node.parent)
        }else{
          return 
        }
      },
    getTrueChildNode_left(node){
      if(!!node.childNodes){
        node.childNodes.forEach(item=>{
          this.checkedArr_left.push(item.data.id)
          this.checkedArr_left= Array.from(new Set(this.checkedArr_left))
          this.getTrueChildNode_left(item)
        })
      }else{
          return 
      }
    },
    getFalseChildNode_left(node){
      this.checkedArr_left=this.checkedArr_left.filter(item=>{return item!=node.data.id})
      this.checkedArr_left= Array.from(new Set(this.checkedArr_left))
      if(!!node.childNodes){
        node.childNodes.forEach(item=>{
          this.getFalseChildNode_left(item)
        })
      }else{
          return 
      }
    },
    getSonId_left(arr){
      this.checkedArr_left=[]
        arr.forEach(item => {
          this.checkedArr_left.push(item.id)
          if(!!item.hasSon){
            this.checkedArr_left= Array.from(new Set(this.checkedArr_left))
            this.getSonId_left(item.son)
          }else{
            return 
          }
        });
      },
    //底部按钮点击事件
    pushButton_left(route){
      if(this.role_id){
        if(route=='preservation'){
          let noCheckedArr=[]
          if(this.treeData_left.length>0&&this.checkedArr_left.length>0){
            this.treeData_left.forEach(item=>{
              if(this.checkedArr_left.findIndex(ite=>{return item.id==ite})==-1){
                noCheckedArr.push(item.id)
              }
            })
          }
          let arr=noCheckedArr.map((obj)=>{return ""+obj})
          let params = new FormData();
            params.append("role_id", this.role_id);
            params.append("address", JSON.stringify(arr));
            params.append("type", 1);
          this.$postForm('saveRoleAddress',params).then((res) => {
            if(res.success){
              this.$message.success(res.msg);
              this.$emit("success");
            }
          });
        }else if(route=='true'){
          //全选
          this.getSonId_left(this.treeData_left)
        }else if(route=='flase'){
          //取消选中
          this.checkedArr_left=[]
          this.$refs.tree_left.setCheckedKeys([]);
        }
      }else{
        this.$message.warning(this.$t('DefaultCustomerPermissionsLang.message'));
      }
    },
    //选中菜单对进行增删
    handleCheck_right(data,obj){
      let temp=obj.checkedKeys.findIndex(item=>{return item==data.id})==-1
      if(!temp){
        this.getParentNode_right(this.$refs.tree_right.getNode(data.id))
        this.getTrueChildNode_right(this.$refs.tree_right.getNode(data.id))
      }else{
        this.getFalseChildNode_right(this.$refs.tree_right.getNode(data.id))
        this.$refs.tree_right.setCheckedKeys(this.checkedArr_right)
      }
    },
    getParentNode_right(node){
        if(!!node.parent){
          this.checkedArr_right.push(node.data.id)
          this.checkedArr_right= Array.from(new Set(this.checkedArr_right))
          this.getParentNode_right(node.parent)
        }else{
          return 
        }
      },
    getTrueChildNode_right(node){
      if(!!node.childNodes){
        node.childNodes.forEach(item=>{
          this.checkedArr_right.push(item.data.id)
          this.checkedArr_right= Array.from(new Set(this.checkedArr_right))
          this.getTrueChildNode_right(item)
        })
      }else{
          return 
      }
    },
    getFalseChildNode_right(node){
      this.checkedArr_right=this.checkedArr_right.filter(item=>{return item!=node.data.id})
      this.checkedArr_right= Array.from(new Set(this.checkedArr_right))
      if(!!node.childNodes){
        node.childNodes.forEach(item=>{
          this.getFalseChildNode_right(item)
        })
      }else{
          return 
      }
    },
    getSonId_right(arr){
      this.checkedArr_right=[]
        arr.forEach(item => {
          this.checkedArr_right.push(item.id)
          if(!!item.hasSon){
            this.checkedArr_right= Array.from(new Set(this.checkedArr_right))
            this.getSonId_right(item.son)
          }else{
            return 
          }
        });
      },
    //底部按钮点击事件
    pushButton_right(route){
      if(this.role_id){
        if(route=='preservation'){
          let noCheckedArr=[]
          if(this.treeData_right.length>0&&this.checkedArr_right.length>0){
            this.treeData_right.forEach(item=>{
              if(this.checkedArr_right.findIndex(ite=>{return item.id==ite})==-1){
                noCheckedArr.push(item.id)
              }
            })
          }
          let arr=noCheckedArr.map((obj)=>{return ""+obj})
          let params = new FormData();
            params.append("role_id", this.role_id);
            params.append("address", JSON.stringify(arr));
            params.append("type", 2);
          this.$postForm('saveRoleAddress',params).then((res) => {
            if(res.success){
              this.$message.success(res.msg);
              this.$emit("success");
            }
          });
        }else if(route=='true'){
          //全选
          this.getSonId_right(this.treeData_right)
        }else if(route=='flase'){
          //取消选中
          this.checkedArr_right=[]
          this.$refs.tree_right.setCheckedKeys([]);
        }
      }else{
        this.$message.warning(this.$t('DefaultCustomerPermissionsLang.message'));
      }
    },
    //获取树形数据
    getTreeList(){
      this.$get('addressList',{limit:-1}).then((res) => {
        this.treeData_left=res.data
        this.checkedArr_left=[]
        if(this.treeData_left.length>0&&this.noCheckedArr_left.length>0){
          this.treeData_left.forEach(item=>{
            if(this.noCheckedArr_left.findIndex(ite=>{return item.id==ite})==-1){
              this.checkedArr_left.push(item.id)
            }
          })
        }
        
        this.treeData_right=res.data
        this.checkedArr_right=[]
        if(this.treeData_right.length>0&&this.noCheckedArr_right.length>0){
          this.treeData_right.forEach(item=>{
            if(this.noCheckedArr_right.findIndex(ite=>{return item.id==ite})==-1){
              this.checkedArr_right.push(item.id)
            }
          })
        }
      })
    },
    //获取树形初始选中数据
    getCheckedTreeList(){
      this.$get('getRoleAddressids',{role_id:this.role_id,type:1}).then((res) => {
        this.noCheckedArr_left=res.data
        this.$get('getRoleAddressids',{role_id:this.role_id,type:2}).then((res) => {
          this.noCheckedArr_right=res.data
          this.getTreeList()
        })
      })
    },
  }
}
</script>
<style scoped lang="less">
.el-tree{
  overflow: auto;
  height: calc(100% - 53px);
}
.headerBox {
  width: 100%;
  height: 38px;
  transition: max-height 0.5s ease-out;
  margin-bottom: 15px;
  box-shadow: 0px 0px 2px#ccc;
  background-color: #EBEEF3;
  padding: 3px 10px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #639de3;
}
</style>